// 设备详情/变更记录
import React from 'react';
import './deviceInfo.scss';
import AreaData from '../../../component/areaData/areaData.js'; //地址库
import cookie from 'react-cookies';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb.js';
import { Modal, Tabs, Row, Col,Select,DatePicker,Table,Button,Input,Card,Image,Descriptions,Switch, message } from 'antd';
import { LinkOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
import {eqModelDetail,updEqOffer,approve} from '../../../api/deviceLibrary'
const { TabPane } = Tabs;
const { confirm } = Modal;
class deviceInfo extends React.Component {
    state = {
            dataSource : [
                {
                  key: '1',
                  name: '胡彦斌',
                  age: 32,
                  address: '西湖区湖底公园1号',
                },
                {
                  key: '2',
                  name: '胡彦祖',
                  age: 42,
                  address: '西湖区湖底公园1号',
                },
            ],
            dataObj:{},
            isOfferModal:false,
            isoffer:false,
            spu_id:'',// 型号id
            apply_type:'',
            sp:false,
            type:'', // 查看详情的时候 是设备还是配件 1设备 2配件
            approvalAndDeclaration:false,// 是否是审批和申报跳转过来的
    }
    componentWillMount(){
        this.columns = [
            {
              title: '采购批次',
              dataIndex: 'number',
              key: 'number',
            },
            {
              title: '采购时间',
              dataIndex: 'contract_time',
              key: 'contract_time',
            },
            {
              title: '采购数量',
              dataIndex: 'buy_count',
              key: 'buy_count',
            },
            {
                title: '采购价格',
                dataIndex: 'buy_price',
                key: 'buy_price',
              },
              {
                title: '采购人',
                dataIndex: 'buy_u_name',
                key: 'buy_u_name',
              },
              {
                title: '采购合同',
                // dataIndex: 'contract_name',
                key: 'contract_name',
                render:(text)=>{
                    return <a onClick={this.viewContract.bind(this,text.contract_url)}>{text.contract_name}</a>
                }
              },
        ]
        this.amendRecordColumns=[
             {
                title: '变更类型',
                dataIndex: 'remark',
                key: 'remark',
              },
              {
                title: '变更前',
                dataIndex: 'old_eq_info',
                key: 'old_eq_info',
              },
              {
                title: '变更后',
                dataIndex: 'new_eq_info',
                key: 'new_eq_info',
              },
              {
                title: '变更时间',
                dataIndex: 'add_time',
                key: 'add_time',
              },
              {
                title: '操作用户',
                dataIndex: 'u_name',
                key: 'u_name',
              }
        ] 
    }
    componentDidMount() {
        this.GetRequest(this.props.location.state)
    }
    // window跳转
    GetRequest=(theRequest)=> {
        if(theRequest.approvalAndDeclaration){
            this.setState({approvalAndDeclaration:true})
        } else {
            this.setState({approvalAndDeclaration:false})
        }
        if(theRequest.apply_type) {
            // 审批
            // 这里面还要做区分  如果是审批成功的才能看到全部
            if(theRequest.suc) {
                this.getEqModelDetail(theRequest.relative_id)
                this.setState({spu_id:theRequest.relative_id,sp:false})
            } else {
                this.getEqModelDetail(theRequest.relative_id)
                this.setState({apply_type:theRequest.apply_type,spu_id:theRequest.relative_id,sp:true})
            }
        } else if(theRequest.look) {
            // 展示详情
            this.getEqModelDetail(theRequest.relative_id)
            this.setState({spu_id:theRequest.relative_id,sp:false})
        } else {
            // 查看详情
            this.getEqModelDetail(theRequest.spu_id)
            this.setState({spu_id:theRequest.spu_id,sp:false,type:theRequest.type})
        }
    }
    // 设备品牌详情
    getEqModelDetail=(spu_id)=>{
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            spu_id
        }
        eqModelDetail(post_data).then(res=>{
            this.setState({
                dataObj:res.data,
                isoffer:res.data.is_offer == 1 ? true:false
            })
        })
    }
    // 选择按钮切换
    switchChange = (checked, event) => {
        this.setState({isOfferModal:true})
    }
    // 弹框提交
    reqIsOffer=()=>{
        let _this = this
        let {spu_id,isoffer} = this.state
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            spu_id,
            'is_offer': isoffer == true ? '2' : '1',
            // 'spec':dataObj.spec_info,
            // 'instructions_ids':dataObj.instructions_ids
        }
        confirm({
            title: '确定要切换?',
            icon: <ExclamationCircleOutlined />,
            // content: '确定要切换',
            onOk() {
                _this.setState({isoffer:!_this.state.isoffer,isOfferModal:false})
                updEqOffer(post_data).then(res=>{
                    if(res.code == 0) {
                        message.success('修改成功')
                    } else {
                        message.error('修改失败')
                    }
                    _this.getEqModelDetail(spu_id)
                })
            },
            onCancel() {
                _this.setState({isOfferModal:false})
            },
          });
       
    }
    // 信息维护
    InformationMaintenance=()=>{
        this.props.history.push({
            pathname: '/index/deviceLibrary/deviceList/addNewType',
            state:{ spu_id:this.state.spu_id}})
    }
    // 通过拒绝
    PassAndRejection=(val)=>{
        let _this = this
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            type:val,
            apply_type:this.state.apply_type,
            id:this.state.spu_id
        }
        approve(post_data).then(res=>{
            if(res.code == 0){
                message.success('操作成功')
                window.location.href=`/index/myWork/myReview`
            } else {
                message.error('操作失败')
            }
        })
    }
    // 查看说明书
    checkManual=(val)=>{
        if(val) {
            window.open(val)
        }
    }
    viewContract=(val)=>{
        if(val) {
            window.open(val)
        }
    }
    goback=()=>{
        // 我的申报和我的审批要区分 sp
        if(this.state.approvalAndDeclaration){
            if(!this.state.sp) {
                window.location.href=`/index/myWork/myDeclare`
            } else {
                window.location.href=`/index/myWork/myReview`
            }
            
        } else {
            window.location.href=`/index/deviceLibrary/deviceList`
        }
        
    }
    render() {
        const { isOfferModal,dataObj,isoffer,sp ,type,approvalAndDeclaration} = this.state;
        return (
            <Row className="deviceListIn-con">
                <Button type='primary' style={{height:40,width:80,textAlign:'center'}} onClick={this.goback}>返回</Button>
                <Tabs style={{width:'100%'}} defaultActiveKey="1">
                        <TabPane tab={<span className="tabTit">设备详情</span>} key="1">
                            {/* 设备基本信息 */}
                            <Row style={{margin:'20px'}}>
                                <Col span={24}>
                                    <div className="topname">
                                        <span> {dataObj.cate_name} {dataObj.eq_model}</span>
                                        {dataObj.is_offer==1?
                                        <span><img src={require('../../../assets/img/sucess.png')} /> 可选用</span> :
                                        <span><img src={require('../../../assets/img/sucess.png')} /> 不可选用</span> 
                                        }
                                        {approvalAndDeclaration ? '':<Button onClick={this.InformationMaintenance} type='text' style={{color:'#2F3CF2',float:'right',marginRight:'20px'}}>
                                            信息维护
                                        </Button>}
                                    </div>
                                </Col>
                                <Col span={24}>
                                    <div className="tipss">
                                        <span className="blue"></span>
                                        <span>设备基本信息</span>
                                    </div>
                                </Col>
                                <Col span={12} className="detailinfo">
                                        <span>设备品牌 : </span><span>{dataObj.brand_name}</span>
                                </Col>
                                <Col span={12} className="detailinfo">
                                        <span>库存情况 : </span><span>{dataObj.total_stock} 台</span>
                                </Col>
                                <Col span={24} className="detailinfo">
                                        <span>设备型号 : </span><span>{dataObj.eq_model}</span>
                                </Col>
                                {/* 是否可选 */}
                                <Col span={24} className="detailinfo">
                                        <span>是否可选 : </span><span className="switch">{dataObj.is_offer == 1? '可选用':'不可选用'} </span> {approvalAndDeclaration ? '':<Switch  checked={isoffer} onClick={this.switchChange.bind(this)} />} 
                                </Col>
                                {/* 设备规格 */}
                                <Col span={24} style={{marginTop:8}}>
                                      <div style={{display:'flex'}}>
                                          <div>
                                             <span>设备规格: </span>
                                          </div>
                                          <div style={{paddingLeft:8}}>
                                            {dataObj.spec_info && dataObj.spec_info.map(item=>(
                                                <div key={item.spec_key} style={{marginBottom:8}}>
                                                    <span>{item.spec_key} -- {item.spec_value}</span>
                                                </div>
                                                ))}
                                          </div>
                                      </div> 
                                </Col>
                                {/* 可适配 */}
                                {/* { dataObj.has_fittings == 1 } */}
                                { type == 2 ? 
                                    <Col span={24} style={{marginTop:8}}>
                                            <div style={{display:'flex'}}>
                                                <div>
                                                    <span>可适配: </span>
                                                </div>
                                                <div style={{paddingLeft:20}}>
                                                    {dataObj.can_fitting_info && dataObj.can_fitting_info.map(item=>(
                                                        <div key={item.url} style={{marginBottom:8}}>
                                                            <span>[{item.cate_name}] -- {item.eq_model}</span>
                                                        </div>
                                                        ))}
                                                </div>
                                        </div>
                                    </Col>
                                : ''}
                                <Col span={24} style={{margin:'6px 0 14px 0'}}>
                                        <div style={{display:'flex'}}>
                                          <div>
                                             <span>说明书: </span>
                                          </div>
                                          <div style={{paddingLeft:20}}>
                                            {dataObj.instructions_url && dataObj.instructions_url.map((item,index)=>(
                                                <span key={item.url} style={{marginRight:8}}>
                                                    <span><a onClick={this.checkManual.bind(this, item.url)} >{item.name}</a> - {item.add_time}</span>
                                                    <span>{dataObj.instructions_url.length > 0 &&  (index + 1) != dataObj.instructions_url.length ? ' 、' :'' }</span>
                                                </span>
                                                ))}
                                          </div>
                                      </div>
                                </Col>
                                {/* 设备图片： */}
                                <span className="imgT">设备图片：</span>
                                <Col span={24} style={{marginLeft:'70px'}}>
                                     {dataObj.img_url && dataObj.img_url.map(item=>(
                                         <Image 
                                            key={item}
                                            width={100}
                                            height={100}
                                            src={item}
                                            style={{marginRight:8}}
                                        />
                                    ))}
                                </Col>
                            </Row>
                            {/* 设备采购信息 */}
                            <Row style={{margin:'20px'}}>
                                <Col span={24}>
                                    <div className="tipss">
                                        <span className="blue"></span>
                                        <span>设备采购信息</span>
                                    </div>
                                </Col>
                                <Col span={24} className="detailinfo">
                                        <span>建议报价：</span><span>{dataObj.advice_price}  / 台</span>
                                </Col>
                                <Col span={24} className="detailinfo">
                                    <span>采购渠道：</span><span>{dataObj.buy_channel}</span> <span>{ dataObj.buy_link?  <a><LinkOutlined /> {dataObj.buy_link}</a> : ''} </span>
                                </Col>
                                <Col span={24} className="detailinfo">
                                    <span>联系人：</span><span> ( {dataObj.contact_type} ) {dataObj.contact_name} - {dataObj.contact_phone}</span>
                                </Col>
                                <Col span={12} className="detailinfo">
                                    <span>到货周期：</span><span>{dataObj.arrival_period}{dataObj.arrival_period_unit ==1 ? '天': (dataObj.arrival_period_unit ==2 ? '周': (dataObj.arrival_period_unit ==3 ? '月':'年')) }</span>
                                </Col>
                                <Col span={12} className="detailinfo">
                                    <span>运输方式：</span><span>{dataObj.transport_type == 1 ? '快递': (dataObj.transport_type == 2 ? '物流':'其他')}</span>
                                    <span> - {dataObj.transport_remark}</span>
                                </Col>
                            </Row>
                            {/* 配件 */}
                            <Row style={{margin:'20px'}}>
                                <Col span={24}>
                                    <div className="tipss">
                                        <span className="blue"></span>
                                        <span>配件</span>
                                    </div>
                                </Col>
                                <Col span={24} className="detailinfo">
                                    <span>有无配件：</span><span>{dataObj.has_fittings == 1 ? '有':'无'}</span>
                                </Col>
                                {dataObj.has_fittings == 1 ? <Col span={24}>
                                    <div style={{display:'flex'}}>
                                          <div className="detailinfo">
                                             <span>配件种类: </span>
                                          </div>
                                          <div style={{paddingLeft:8}} className="detailinfo">
                                                {dataObj.has_fittings == 1? (dataObj.fitting_info.map(item=>(
                                                    <span>{item}</span>
                                                ))) :''} 
                                          </div>
                                      </div> 
                                </Col>:''}
                                
                            </Row>
                            {/* 采购记录 */}
                            {sp ? '': 
                                <Row style={{margin:'20px'}}>
                                    <Col span={24}>
                                        <div className="tipss">
                                            <span className="blue"></span>
                                            <span>采购记录</span>
                                        </div>
                                    </Col>
                                    <Col span={24}>
                                        <Table dataSource={dataObj.buy_info} columns={this.columns} rowKey={record => record.key} scroll={{ x: '100%' }} pagination={false} locale={{ emptyText: '暂无数据' }}></Table>
                                    </Col>
                                </Row>
                            }
                            {sp &&  dataObj.is_show_button != 0 ? 
                            <Row style={{margin:'20px'}}>
                                <Col span={24}>
                                    <Button  onClick={this.PassAndRejection.bind(this,2)} htmlType="submit" style={{padding: '8px 24px 28px 24px',borderRadius:'4px',marginLeft:'400px',marginRight:'20px'}}>
                                        拒绝
                                    </Button>
                                    <Button  onClick={this.PassAndRejection.bind(this, 1)}  type="primary" htmlType="submit" style={{padding: '8px 24px 28px 24px', backgroundColor: '#0054FEFF',color:'#fff',borderRadius:'4px',}}>
                                        通过
                                    </Button>
                                </Col>
                            </Row>
                             : ''}
                        </TabPane>
                        {sp ? '': 
                            <TabPane tab="更改记录" key="2">
                                <Table  dataSource={dataObj.opt_log} columns={this.amendRecordColumns} rowKey={record => record.key} scroll={{ x: '100%' }} pagination={false} locale={{ emptyText: '暂无数据' }}></Table>
                            </TabPane>
                        }
                    </Tabs> 
                {/* model */}
                <Modal
                    wrapClassName="isOfferModal_s"
                    visible={isOfferModal}
                    closable={false}
                    footer={[
                        <Button style={{backgroundColor:'#334BFC',borderRadius:'4px'}} key="submit" type="primary" onClick={this.reqIsOffer}>
                            确认切换
                        </Button>,
                        <Button style={{borderRadius:'4px'}} key="back" onClick={()=>{this.setState({isOfferModal:false})}}>
                            暂不切换
                        </Button>
                      ]}
                    >
                    <div className="addCar">
                            <div>
                                设备将有<span style={{color:'orange'}}>“{dataObj.is_offer == 1 ? '':'不'}可选用”</span> 切换到 <span style={{color:'orange'}}>“{dataObj.is_offer == 1 ? '不':''}可选用”</span>状态, 切换后在新增项目配置设备时，该型号设备 <span>{dataObj.is_offer == 1 ? '将无法选择':'可选用'}</span> ，请谨慎操作。
                            </div>
                            <div className="xinxin">
                                <p>已配置过设备不受影响</p>
                            </div>
                    </div>
                </Modal>                                    
            </Row>
            
        )
    }
}

export default deviceInfo;